<template>
  <van-popup
    v-model="show"
    position="bottom"
  >
    <van-datetime-picker
      v-model="value"
      :type="type"
      :title="title"
      :min-date="minDate"
      :max-date="maxDate"
      @change="change"
      @confirm="confirm"
      @cancel="cancel"
    />

  </van-popup>
</template>

<script>

import { Popup, DatetimePicker } from 'vant'
import DateHelper from '@/utils/date'

export default {
  name: 'CfDateTimePicker',
  components: {
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker
  },
  props: {
    title: { // 标题
      type: String, require: false, default: '选择年月日'
    },
    popShow: { // 显示控制标识
      type: Boolean, require: false, default: false
    },
    type: { // 日期时间组件类型
      type: String, require: true, default: () => 'date'
    },
    selectChange: {
      type: Function, require: true, default: () => { }
    },
    selectCancel: {
      type: Function, require: true, default: () => { }
    },
    selectConfirm: {
      type: Function, require: true, default: () => { }
    }
  },
  data () {
    return {
      value: new Date(),
      minDate: new Date(1900, 0, 1),
      maxDate: new Date()
    }
  },
  computed: {
    show: {
      get () {
        return this.popShow
      },
      set (val) {
        this.$emit('pop-change', val)
      }
    }
  },
  watch: {

  },
  created () {

  },
  methods: {
    confirm (val) {
      this.$emit('pop-change', false)
      this.selectConfirm(DateHelper.toDateStr(val))
    },
    change (picker) {
      this.selectChange(picker)
    },
    cancel () {
      this.$emit('pop-change', false)
      this.selectCancel()
    }
  }

}
</script>

<style>
</style>
